<template>
    <div class="channel-edit">
        <van-cell title="我的频道" class="title-text" :border="false">
            <van-button size="mini" round type="danger" plain class="edit-btn" @click="isEdit=!isEdit">{{!isEdit?'编辑':'完成'}}
            </van-button>
        </van-cell>
        <van-grid :gutter="10" class="my-grid">
            <van-grid-item
                class="channel-item"
                v-for="(obj,i) in channel"
                :key="i"
                @click="changeMyChannel(obj,i)"
                >
                <span class="text" :class="{active:active === i}" slot="text">{{obj.name}}</span>
                <!-- 编辑删除的图标 -->
                 <van-icon v-show="isEdit && !flex.includes(obj.id)"  slot="icon" name="close" class="closeIcon" />
            </van-grid-item>
        </van-grid>
        <van-cell title="频道推荐" class="title-text" :border="false"></van-cell>
        <van-grid :gutter="10" class="recommed-grid">
          <van-grid-item
            class="channel-item"
            v-for="obj in recommendChannel"
            @click="onAddChannel(obj)"
            :key="obj.id "
            icon="plus"
            > <span class="text"  slot="text">{{obj.name}}</span></van-grid-item>
        </van-grid>
    </div>
</template>

<script>
import { deleteUserChannels, addUserChannel, getAllChannels } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/uitls/storage'
export default {
  name: 'channelEdit',
  data () {
    return {
      allChannels: [], // 全部频道
      isEdit: false, // 控制编辑的状态
      flex: [0] // 固定id不能删除
      // actives: this.active // 引用地址
    }
  },
  props: {
    channel: { // 自己的频道
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  async created () {
    this.loading()
  },

  mounted () {
  },

  methods: {
    async onAddChannel (v) { // 点击添加至我的频道 关闭代码提示
      // eslint-disable-next-line vue/no-mutating-props
      this.channel.push(v)
      if (this.user) {
        // 已登录
        try {
          await addUserChannel({
            id: v.id, // 频道id
            seq: this.channel.length
          })
          this.$toast('添加成功')
        } catch (err) {
          this.$toast('保存失败')
        }
      } else {
        // 未登录
        setItem('CHANNELS', this.channel)
      }
    },
    changeMyChannel (v, i) { // 点击跳转或删除
      if (this.isEdit) { // 是编辑状态
        // 执行删除操作
        if (this.flex.includes(v.id)) return // 固定频道 不允许删除
        if (i <= this.active) {
          this.$emit('active-update', this.active - 1, true)
        }
        // eslint-disable-next-line vue/no-mutating-props
        this.channel.splice(i, 1)
        // 删除数据持久化
        this.deleteChannel(v)
      } else {
        // 执行跳转操作
        this.$emit('active-update', i, false)
      }
    },
    async deleteChannel (v) {
      try {
        if (this.user) {
          // 已登录，将数据存储到线上
          this.$toast('删除成功')
          await deleteUserChannels(v.id)
        } else {
          // 未登录，将数据存储到本地
          setItem('CHANNELS', this.channel)
        }
      } catch (err) {
        console.log(err)
        this.$toast('删除频道失败，请稍后重试')
      }
    },
    async loading () {
      try {
        const { data } = await getAllChannels()
        this.allChannels = data.data.channels
        console.log(data)
      } catch (err) {
        console.log(err)
        this.$toast('获取全部频道列表失败，请重试')
      }
    }
  },
  computed: {
    recommendChannel () { // 对推荐的频道进行筛选 ----》所有的频道-我的频道
      return this.allChannels.filter(items => { // 对所有的频道进行筛选 定义一个变量，对每一个符合条件的数据 返回
        return !this.channel.find(item => item.id === items.id)
      })
    },
    ...mapState(['user'])
  }
}
</script>

<style lang="less" scoped>
.channel-edit{
  padding: 75px 0;
  .title-text{
    font-size: 28px;
    color: #333;
  }
  .edit-btn{ // 编辑按钮
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  /deep/ .channel-item{ // 频道的盒子
    width: 160px;
    height: 86px;
    .van-grid-item__content{
        white-space: nowrap;
        background-color: #f4f5f6;
        .van-grid-item__text,.text{
            font-size: 24px;
            color: #222;
            margin-top: 0;
        }
        .active{
          color: red;
        }
    }
    }

   /deep/ .recommed-grid{
        .van-grid-item__content{
            flex-direction: row;
            .van-icon-plus{
                font-size: 28px;
                margin-right: 6px;
            }
        }
    }
   /deep/ .my-grid{ // 我的频道
        .van-icon-clear{
            position: absolute;
            right: -10px;
            top: -10px;
            font-size: 30px;
            color: #cacaca;
            z-index: 2;
        }
        .closeIcon{ //个人编辑小按钮
          position: absolute;
          top: -38px;
          left: 70px;
          font-size: 24px;
          color: red;
        }
    }
}
</style>
